<template>
  <div class="leaveCoach">
    <el-dialog :title="isVacate ? '请假' : '撤销请假'" :visible.sync="visible" @close="handleCancel">
      <el-row>
        <el-col :span="3">
          <div class="grid-content bg-purple">
            请假人:
          </div>
        </el-col>
        <el-col :span="21">
          <div class="grid-content bg-purple-light">
            {{coachInfo.name}}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="isVacate ? 4 : 24" class="time-range">
          <div class="grid-content bg-purple">
            {{isVacate ? '请假时间：' : '请选择撤销请假的时间：'}}
          </div>
        </el-col>
        <el-col :span="20" v-if="isVacate">
          <div class="grid-content bg-purple-light">
            <!-- <el-date-picker v-model="date" type="daterange" placeholder="选择请假时间" :picker-options="pickerOptions" @change="handleDate" /> -->
            <el-date-picker size="small" style="width: 55%" v-model="date" type="daterange" placeholder="选择请假时间" 
              :picker-options="pickerOptions" @change="handleDate" />
            <span class="remind">注：可请未来7天的假</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" v-if="isVacate&&courseTime">
          <div class="grid-content bg-purple">
            请假课程：
          </div>
        </el-col>
        <el-col :span="isVacate ? 20 : 24">
          <div class="grid-content bg-purple-light" v-if="isVacate">
            <div class="course" v-if="isCourse&&courseTime">
              <el-scrollbar class="import_table" wrap-class="vacade-scroll">
                <template v-for="(item, index) in train_coach_course_time">
                  <el-checkbox 
                    :label="item.id" 
                    :key="index + Math.random().toString(36).substr(2)" 
                    v-model="objectSelect[index].checked">
                    {{item.courseName}} {{new Date(item.beginDate).format('yyyy-MM-dd')}} {{item.weekcode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}
                  </el-checkbox>
                  <div v-if="objectSelect[index].checked" :key="item.id + Math.random().toString(36).substr(2)" class="selected_teacher" >
                    <!-- <el-radio :label="objectSelect[index].options[0].radio" v-model="objectSelect[index].options[0].checked"  @input="handleChange($event, 0 , objectSelect[index].options)">
                      代课教练：
                      <el-select v-model="objectSelect[index].options[0].selectedCoachId" placeholder="请选择代课教练">
                        <el-option
                          v-for="item in train_teacher_list"
                          :key="item.id"
                          :value="item.id"
                          :label="item.teacherName">
                        </el-option>
                      </el-select>
                    </el-radio>
                    <el-radio :label="objectSelect[index].options[1].radio" v-model="objectSelect[index].options[1].checked" @input="handleChange($event, 1 , objectSelect[index].options)">
                      改期上课：
                      <el-date-picker
                        v-model="objectSelect[index].options[1].value[0]"
                        type="date"
                        :clearable="false"
                        placeholder="选择上课的日期"
                        :picker-options="pickerOptions"
                        class="courseDate">
                      </el-date-picker>
                      <el-time-picker
                        is-range
                        :clearable=false
                        v-model="objectSelect[index].options[1].value[1]"
                        format="HH:mm"
                        placeholder="选择上课的时间范围"
                        class="courseTimeRange">
                      </el-time-picker>
                    </el-radio> -->
                    代课教练：
                    <el-select size="small" v-model="objectSelect[index].options[0].selectedCoachId" placeholder="请选择代课教练">
                      <el-option
                        v-for="(item, index) in train_teacher_list"
                        :key="index + Math.random().toString(36).substr(2)"
                        :value="item.id"
                        :label="item.teacherName">
                      </el-option>
                    </el-select>
                  </div>
                </template>
              </el-scrollbar>
            </div>
            <div v-else-if="!isCourse&&courseTime">
              暂无可请假的课程
            </div>
          </div>
          <div class="grid-content bg-purple-light" v-else>
            <el-scrollbar class="import_table" wrap-class="vacade-scroll">
              <el-checkbox-group v-model="checkList" class="time-list">
                <el-checkbox v-for="item in train_coach_leave_time" :key="item.id" :label="item.id">
                  {{new Date(item.beginDate).format('yyyy-MM-dd')}} {{item.weekcode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}                
                </el-checkbox>
              </el-checkbox-group>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" v-if="!coachInfo.isLeave" :disabled="checkList.length === 0">确 定</el-button>
        <el-button type="primary" @click="handleSubmit" v-else :disabled="!selectedDate || !(courseTime && objectSelect.some(item => item.checked))">确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  props: {
    isVacate: {
      type: Boolean,
      default: true
    },
    coachInfo: {
      type: Object
    }
  },
  data () {
    return {
      visible: true,
      objectSelect: {},
      checkList: [],
      courseTime: false,
      isCourse: false,
      selectedDate: false,
      date: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 24 * 60 * 60 * 1000 * 7
        }
      }
    }
  },
  created () {
    if (!this.isVacate) {
      this.$store.dispatch('train_coach_leave_time', {teacherId: this.coachInfo.id})
    } else {
      this.$store.dispatch('train_teacher_list')
    }
  },
  computed: {
    ...mapGetters({
      train_coach_course_time: 'train_coach_course_time',
      train_coach_leave_time: 'train_coach_leave_time',
      train_teacher_list: 'train_teacher_list'
    })
  },
  watch: {
    train_teacher_list (value) {
      value = value.map((item, index) => {
        if (item.id === this.coachInfo.id) {
          return value.splice(index, 1)
        }
      })
    },
    train_coach_course_time (value) {
      if (value.length === 0) {
        this.courseTime = true
        this.isCourse = false
      } else {
        this.courseTime = true
        this.isCourse = true
      }
      let that = this
      this.objectSelect = value.map(item => {
        return {
          checked: false,
          id: item.id,
          beginDate: item.beginDate,
          courseCycleId: item.courseCycleId,
          options: [
            {
              checked: '2',
              coachList: that.train_teacher_list,
              radio: '2',
              selectedCoachId: ''
            }
            // {
            //   checked: '',
            //   value: ['', []],
            //   radio: '1'
            // }
          ]
        }
      })
    }
  },
  methods: {
    handleChange ($event, index, options) {
      options.forEach((item) => {
        item.checked = ''
      })
      options[index].checked = $event
    },
    handleDate (value) {
      if (!value) { // 时间不存在
        this.courseTime = false
        this.isCourse = false
      } else {
        this.selectedDate = true
        this.$store.dispatch('train_coach_course_time', {teacherId: this.coachInfo.id, beginDate: new Date(this.date[0]).getTime(), endDate: new Date(this.date[1]).getTime()})
      }
    },
    handleCancel () {
      this.$emit('input', false)
    },
    handleSubmit () {
      if (this.isVacate) {
        let vacateListData = this.objectSelect.map((item, index) => {
          return {
            // replaceBeginDate: item.checked ? item.options[1].checked === '1' ? new Date(item.options[1].value[0]).getTime() : '' : '',
            // replaceStartTime: item.checked ? item.options[1].checked === '1' ? new Date(item.options[1].value[1][0]).getTime() : '' : '',
            // replaceEndTime: item.checked ? item.options[1].checked === '1' ? new Date(item.options[1].value[1][1]).getTime() : '' : ''
            id: item.id,
            beginDate: item.beginDate,
            courseCycleId: item.courseCycleId,
            replaceTeacherId: item.checked ? item.options[0].checked === '2' ? item.options[0].selectedCoachId : '' : '',
            scheduleType: item.checked ? item.options[0].checked === '2' ? '2' : '' : ''
          }
        })
        let dataList = vacateListData.filter(item => {
          return item.scheduleType
        })
        trainApi.coachVacate(JSON.stringify(dataList), {context: this, successMsg: '请假成功'}).then(res => {
          this.$emit('success').$emit('input', false)
        })
      } else {
        trainApi.cancelCoachVacate({scheduleIds: this.checkList}, {context: this, successMsg: '撤销请假成功'}).then(res => {
          this.$emit('success').$emit('input', false)
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .leaveCoach {
    .el-row {
      margin-bottom: 15px;
    }
    .time-range {
      line-height: 36px;
    }
    .el-checkbox {
      width: 95%;
      margin-bottom: 15px;
    }
    // .el-radio {
    //   width: 98%;
    //   margin-bottom: 15px;
    // }
    .courseDate {
      width: 145px;
    }
    .courseTimeRange {
      width: 175px;
    }
    .selected_teacher {
      padding-left: 30px;
      margin-bottom: 15px;
    }
    .time-list {
      margin-left: 20px;
      .el-checkbox {
        width: 45%;
        margin-bottom: 20px;
      }
    }
    .vacade-scroll{
      max-height:300px;
      overflow-y: scroll;
    }
    .remind {
      color: #FF9900;
      font-size: 12px;
      padding-left: 5px;
    }
  }
</style>
